<template>
	<view class="transportType">
		<view class="title" v-if="showTitle">
			{{$t("运输方式")}}
		</view>
		<view style="width: 100%;overflow: auto">
			<view class="images">
				<div class="item" v-if="mapMode('汽运') || mapMode('不限')">
					<img :src="HTTP_IMG_UTL+'huowuPic1.png'" alt="" />
				</div>
				<div class="item" v-if="mapMode('空运') || mapMode('不限')">
					<img :src="HTTP_IMG_UTL+'huowuPic8.png'" alt="" />
				</div>
				<div class="item" v-if="mapMode('海运') || mapMode('不限')">
					<img :src="HTTP_IMG_UTL+'huowuPic6.png'" alt="" />
				</div>
				<div class="item" v-if="mapMode('火车') || mapMode('铁路') || mapMode('不限')">
					<img :src="HTTP_IMG_UTL+'huowuPic7.png'" alt="" />
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	export default {
		props: {
			item: {
				type: Object,
				default: {},
			},
			showTitle: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				HTTP_IMG_UTL
			}
		},

		methods: {
			mapMode(modeName) {
				if (typeof this.item.mode === 'string') {
					let modeArr = this.item.mode.split(',');
					if (modeArr.indexOf(modeName) > -1) {
						return true
					}
					return false
				} else if (typeof this.item.mode === 'object') {
					let modeArr = this.item.mode.text.split(',');
					if (modeArr.indexOf(modeName) > -1) {
						return true
					}
					return false
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.transportType {
		display: inline-block;
		width: 100%;
		.title {
			font-size: 24rpx;
			font-weight: 600;
			color: #3d3d3d;
			margin-bottom: 20rpx;
		}

		.images {
			display: flex;
			flex-wrap: nowrap;
			img {
				width: 120rpx;
				max-width: 90%;
				max-height: 90%;
				margin-right: 10rpx;
			}

			.item {
				box-sizing: border-box;
				background-color: #f5f5f5;
				padding: 15rpx 10rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 10rpx;
				height: 100rpx;
				width: 200rpx;
			}
		}
	}
</style>